<template>
    <div class="app-container">
        <!-- <div
            class="layout-content"
            ref="container"
            @mousemove="handleMouseMove"
        > -->
        <div class="layout-content">
            <Layout :activeIndex="activeIndex" :naviList="naviList">
                <template #header>
                    <header>
                        <Header
                            :activeIndex="activeIndex"
                            @handleItemLength="handleItemLength"
                        />
                    </header>
                </template>
                <template #default>
                    <RouterView />
                </template>
                <template #footer>
                    <footer>
                        <Footer />
                    </footer>
                </template>
            </Layout>
        </div>
        <div class="carousel-content">
            <ImageLoader :mouseX="mouseX" :mouseY="mouseY" />
        </div>
        <!-- <div class="carousel-content">
            <img :src="require('@/assets/images/home_bg.gif')" />
        </div> -->
    </div>
</template>

<script>
import ImageLoader from "@/components/ImageLoader";
import Layout from "@/components/Layout";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
    components: {
        Layout,
        Header,
        Footer,
        ImageLoader,
    },
    data() {
        return {
            activeIndex: 0,
            itemLength: 0,
            mouseX: 0, // 鼠标的横坐标
            mouseY: 0, // 鼠标的纵坐标
            naviList: [],
        };
    },
    methods: {
        handleMouseMove(e) {
            const rect = this.$refs.container.getBoundingClientRect();
            this.mouseX = e.clientX - rect.left;
            this.mouseY = e.clientY - rect.top;
        },
        handleItemLength(value) {
            this.naviList = value;
        },
    },
};
</script>

<style lang="less" scoped>
.app-container {
    @media screen and (min-width: 1365px) {
        .layout-content {
            min-width: 1366px;
        }
    }
    @media screen and (max-width: 1366px) {
        .layout-content {
            min-width: 1200px;
        }
    }
    .layout-content {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
        header {
            width: 100%;
            height: 60px;
        }
        footer {
            width: 100%;
            height: 30px;
        }
    }

    .carousel-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        z-index: -1;
        // img {
        //     width: 100%;
        //     height: 100%;
        // }
    }
}
</style>
